<template>
	<view>
		<view class="top">
			<view class="top_left" v-if="userInfo.username">
				<image :src="userInfo.avatar_text" mode=""></image>
				<view class="" style="margin-left: 20rpx;">
					<view class="flex">
						<view class="name">{{userInfo.nickname}}</view>
						<view class="tip" v-if="userInfo.is_circle">
							圈子会员
						</view>
					</view>
					<view class="phone">手机号：<text>{{userInfo.mobile_text}}</text> </view>
				</view>
			</view>
			<view v-else class="top_left" @click="$pageGo('/pages/login/login')">
				<image src="/static/tx.png" mode=""></image>
				<view class="ts" style="margin-left: 20rpx;">
					点击登录
				</view>
			</view>
			<image class="img" :style="{filter:userInfo.is_circle==1?`grayscale(0)`:`grayscale(1)`}"
				src="/static/jpact.png" mode=""></image>
		</view>

		<view class="imgtip">
			<image :style="{filter:userInfo.is_circle==1?`grayscale(0)`:`grayscale(1)`}" src="/static/ubcg.png" mode="">
			</image>
			<view class="ads" v-if="userInfo.is_circle">
				第{{userInfo.meeting_num}}期碳能商圈成员
			</view>
			<view class="ads flex_jc_sb" v-else>
				您还不是碳能商圈成员
				<view class="btn" @click="goapply">
					立即申请
				</view>
			</view>
		</view>


		<view class="content_1">
			<view class="item" v-for="(item,inx) in ulist" :key="inx" @click="pageGo(item,inx)">
				<image :src="item.icon" mode=""></image>
				<view class="">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="content_2">
			<view class="item flex_jc_sb" v-for="(item,inx) in ulist1" :key="inx" @click="pageGo1(item,inx)">
				<view class="flex">
					<image :src="item.icon" mode=""></image>
					<view class="text">
						{{item.name}}
					</view>
				</view>
				<button open-type="contact" v-if="inx==0"></button>
				<uni-icons type="right" v-if="inx!=3"></uni-icons>
			</view>
			<view class="item flex_jc_sb" v-if="userInfo.username">
				<view class="flex" @click="logout">
					<image src="@/static/u8.png" mode=""></image>
					<view class="text">
						退出登录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance();
	import {
		getUserinfo
	} from '@/common/http.api.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import u1 from '@/static/u1.png'
	import u2 from '@/static/u2.png'
	import u3 from '@/static/u3.png'
	import u4 from '@/static/u4.png'
	import u5 from '@/static/u5.png'
	import u6 from '@/static/u6.png'
	import u7 from '@/static/u7.png'
	import u8 from '@/static/u8.png'
	const ulist = ref([{
			name: '我的资料',
			icon: u1,
			path: '/mainPage/addressbook'
		},
		{
			name: '我的商机',
			icon: u2,
			path: '/mainPage/mybusiness'
		},
		{
			name: '我的学习',
			icon: u3,
			path: '/mainPage/mystudy'
		},
		{
			name: '我的会议',
			icon: u4,
			path: '/mainPage/myactivity'
		}
	])


	const ulist1 = ref([{
			name: '联系客服',
			icon: u5,
			path: ''
		},
		{
			name: '平台协议',
			icon: u6,
			path: '/mainPage/about?type=4'
		},
		{
			name: '用户协议',
			icon: u7,
			path: '/mainPage/about?type=2'
		}
	])
	const userInfo = ref({})
	onShow(() => {
		if (uni.getStorageSync('cirleToken')) {
			getUserinfo({}).then(res => {
				userInfo.value = res.data
				uni.setStorageSync('user', res.data)
			})
		}
	})

	function pageGo(item, index) {
		if (uni.getStorageSync('cirleToken')) {
			if (index == 0) {
				if (userInfo.value.is_circle == 0) {
					proxy.$pageApply()
					return
				}
				if (userInfo.value.is_circle == 1 && userInfo.value.circle_data != null) {
					uni.navigateTo({
						url: item.path
					})
					return
				}
				uni.navigateTo({
					url:'/pages/user/apply'
				})
			} else if (index == 1) {
				if (userInfo.value.is_circle == 0) {
					proxy.$pageApply()
					return
				} else {
					uni.navigateTo({
						url: item.path
					})
				}
			} else {
				uni.navigateTo({
					url: item.path
				})
			}

		} else {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}

	}

	function goapply() {
		if (uni.getStorageSync('cirleToken')) {
			uni.navigateTo({
				url: '/pages/user/apply'
			})
		} else {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}

	}

	function logout() {
		uni.showLoading({
			title: '安全退出中...'
		})
		setTimeout(() => {
			uni.hideLoading()
			uni.removeStorageSync('user')
			uni.removeStorageSync('cirleToken')
			userInfo.value = {}
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}, 1000)
	}

	function pageGo1(item, inx) {
		if (inx == 0) {
			return
		} else {
			uni.navigateTo({
				url: item.path
			})
		}

	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(90deg, #E5F8FF 0%, #FFF3F8 100%);
	}

	.ts {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
	}

	.top {
		width: 100%;
		height: 336rpx;
		position: relative;
		padding: 0rpx 20rpx;
		box-sizing: border-box;

		.top_left {
			position: absolute;
			bottom: 0%;
			display: flex;
			align-items: center;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 70rpx;
				border: 4rpx solid #FFFFFF;
			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}

			.tip {
				width: 92rpx;
				height: 40rpx;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFACAC 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1px solid #FF90A8;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 20rpx;
				color: #FF2352;
				text-align: center;
				line-height: 40rpx;
				margin-left: 20rpx;
			}

			.phone {
				margin-top: 15rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #A6AABF;

				text {
					color: #0756FF;
				}
			}
		}

		.img {
			position: absolute;
			width: 192rpx;
			height: 320rpx;
			right: 100rpx;
			top: 0%;
			filter: grayscale(1);
		}
	}

	.imgtip {
		width: 710rpx;
		height: 100rpx;
		margin: 20rpx auto;
		position: relative;

		image {
			width: 710rpx;
			height: 100rpx;
		}

		.ads {
			position: absolute;
			top: 0%;
			width: 710rpx;
			height: 100rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.67);
			line-height: 100rpx;
			padding-left: 100rpx;
			padding-right: 20rpx;
			box-sizing: border-box;

			.btn {
				width: 144rpx;
				height: 60rpx;
				background: linear-gradient(92deg, #9598A8 0%, #0F0F1E 100%);
				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}

	.content_1 {
		width: 710rpx;
		height: 180rpx;
		background: linear-gradient(180deg, #D0EDFF 0%, #FFFAFC 81%);
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(124, 124, 124, 0.16);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-evenly;
		align-items: center;

		.item {
			text-align: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			font-family: PingFang SC,
			PingFang SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #100C3C;
		}
	}

	.content_2 {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 0rpx 30rpx 1rpx;
		box-sizing: border-box;

		button {
			width: 650rpx;
			position: absolute;
			height: 50rpx;
			opacity: 0;
		}

		.item {
			padding-top: 20rpx;
			margin: 20rpx auto;

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #100C3C;
				margin-left: 30rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
</style>